    <canvas id="canvas" width='500' height="500" style="background:#eee">
           <p>you browser not support canvas!<p>
       </canvas>
       <script>
            window.onload = ()=>{
                class bTree{
                    constructor (options, {x = 0, y = 0, angle = 0.4, genNum = 12, color = '#ccc', length = 120, ctx = null, scaleX = 0.7, scaleY = 0.7, width = 18} = options){
                            Object.assign(this, {x, y, color, angle, ctx, genNum, length, options, scaleX, scaleY, width})
                            this.gen = 0
                            this.leaveColor = '#' + (Math.random() * 0xffffff).toString(16).substr(0,6)
                            this.color = '#' + (Math.random() * 0xffffff).toString(16).substr(0,6)
                            
                    }
                    draw(){
                        let ctx = this.ctx
                        ctx.save()
                        ctx.strokeStyle = this.color
                        ctx.lineWidth = this.width
                        ctx.lineCap = 'round'
                        ctx.lineJoin = 'round'
                        ctx.translate(this.x, this.y)
                        this.branch(0)//主干不旋转
                        ctx.restore()
                    }
                    branch(angle){
                        this.gen ++
                        if(this.gen < this.genNum){
                            let ctx = this.ctx
                            ctx.save()
                            ctx.beginPath()
                            ctx.rotate(angle)
                            ctx.scale(this.scaleX, this.scaleY)
                            ctx.moveTo(0, 0)
                            ctx.translate(0, -this.length * Math.random() - 80)
                            ctx.lineTo(0, 0)
                            ctx.stroke()
                            if(this.gen < this.genNum){
                                this.branch(this.angle + Math.random() * 0.3)
                                this.branch(-this.angle - Math.random() * 0.3)
                            }
                            ctx.restore()
                        }else{
                            ctx.save()
                            //ctx.rotate(-angle)
                            ctx.scale(0.6, 0.6)
                            ctx.fillStyle = this.leaveColor
                            ctx.fillRect(0, 0, 400, 200)
                            ctx.restore()
                        }
                        this.gen--
                    }
                }
            
                let canvas = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d'),
                    w = canvas.width = window.innerWidth,
                    h = canvas.height = window.innerHeight,
                    currentX = w / 2,
                    currentY = h / 2
                    let tree = new bTree({x: 900, y: 900, ctx})
                    tree.draw()
                  ;  
                (function update(){
                    requestAnimationFrame(update, canvas)
                    ctx.clearRect(canvas.width, canvas.height)                    
                })
                    
            }
       </script>